/**
 * 热力网格图（表现意义同热力图）
 */
import sgisLayerBase from '../../sfgis.layer.base';
import styleModify from '../macrolayers/echarts.stylemodify.js';
export default {
  gridLayer: '',
  gridColor: [
    [
      '#3C73DA',
      '#0F62FF',
      '#0F62FF',
      '#30B2E9',
      '#30B2E9',
      '#40C4CE'
    ],
    [
      '#FF4818',
      '#F7B74A',
      '#FFF598',
      '#FF40F3',
      '#9415FF',
      '#421EB2'
    ],
    ['#FFB02A',
    '#FFE754',
    '#46F3FF',
    '#02BEFF',
    '#1A7AFF',
    '#0A1FB2'],
    [
      '#FF4818',
      '#F7B74A',
      '#FFF598',
      '#FF40F3',
      '#9415FF',
      '#421EB2'
    ],
    [
      '#0796D3',
      '#2BA9DF',
      '#30C7C4',
      '#6BD5A0',
      '#A7ECB2',
      '#D0F4CA'
    ],
  
  ], // 网格图配色方案
  layerNum: 0, // 图多能叠加10个，过多时提示移除，防止太卡
  colorNum:0,
  // 重置数据个数
  resetlayerNum() {
    this.layerNum = 0;
  },
  // 初始化图层信息
  initLayer(map, data) {
    const heatLayerInfo = {};
    heatLayerInfo.layerId = "gridLayer_" + data.id + new Date().getTime();
    heatLayerInfo.layer = "";
    return heatLayerInfo;
  },
  // 绘制图层
  renderLayer(map, data, item) {
    this.colorNum = item.sort;
    const colors = this.gridColor[this.colorNum]? this.gridColor[this.colorNum] : this.gridColor[this.colorNum%this.gridColor.length];
    var dataSet = new mapv.DataSet(data.data.griddata);
    var options = {
      layerID:item.layerId,
      shadowBlur: 20,
      max: data.data.maxdata,// 最大权重值
      size: 50,
      unit: 'px', // unit可选值['px', 'm']，默认值为'px'
      label: {
          show: true,
          fillStyle: 'white'
      },
      globalAlpha: 0.7,
      gradient: {  // 渐变色设置
        0.15:colors[5], 
        0.3:colors[4], 
        0.45:colors[3],
        0.6:colors[2],
        0.8:colors[1], 
        1.0:colors[0]
      },
      draw: 'grid'
    };

    var mapVLayer = new mapboxgl.supermap.MapvLayer('', dataSet, options);
    map.addLayer(mapVLayer);
    
    // const headtmapMarkers = map.getLayer(item.layerId);
    const heatmapLayer = map.getLayer(item.layerId);

    heatmapLayer.setVisible = this.setVisible; // 添加设置可见性函数
    heatmapLayer.setOpacity = this.setOpacity; // 添加设置图层透明度函数
    // heatmapLayer.setZIndexOffset = this.setZIndexOffset; // 设置图层顺序函数

    const heatmapLayerInfo = {};
    heatmapLayerInfo.layerId = item.layerId;
    const zIndex = styleModify.curZindex - item.sort;// 结果展示多个结果导致图层顺利不固定问题
    styleModify.layerOrder[heatmapLayerInfo.layerId] = zIndex;
    heatmapLayer.layerNum = item.sort;
    heatmapLayer.name = data.name;

    heatmapLayerInfo.name = data.name;

    heatmapLayerInfo.type = 'gridLayer';
    heatmapLayerInfo.html = this.calGraph(heatmapLayer, item.layerId);
    heatmapLayerInfo.show = data.showThumbnails !== false;
    map.overlayerInfos[item.layerId] = heatmapLayerInfo;
    map.overlayers[item.layerId] = heatmapLayer;

    sgisLayerBase.setOverLayers(heatmapLayerInfo);
  },

  /**
   *
   * @param {Object} laryer
   * @param {String} colorParam
   */
  setVisible(visible, map, layer) {
    if (visible === "visible") { // 显示图层
      map.setLayoutProperty(layer.id, 'visibility', 'visible');
    } else if (visible === "hidden") {  // 隐藏图层
      map.setLayoutProperty(layer.id, 'visibility', 'none');
      map.setLayoutProperty(layer.id, 'visibility', false);
    } else {
      return;
    }
  },
  /* *设置图层透明度 */
  // eslint-disable-next-line no-unused-vars
  setOpacity(opacity, map, layer) {
    // map.setPaintProperty(layer.id, 'raster-opacity', opacity / 100);
  },
  /** 设置调整图层顺序函数*/
  // eslint-disable-next-line no-unused-vars
  setZIndexOffset(index) {
    console.log("暂时不做图层调整");
    // styleModify.setZIndexOffset(index, this.layerId, this.rootCanvas);
  },
  calGraph(heatLayer, layerId) {
    const heatCorlors = this.gridColor[this.colorNum]? this.gridColor[this.colorNum] : this.gridColor[this.colorNum%this.gridColor.length];
    const html = `
      <div class='chart_item'  style = 'line-height:90px;text-align:center;' class=${layerId}>
        <div style = 'width:45px;height:45px;background:-webkit-gradient(linear, 0 0, 0 100%, from(${heatCorlors[0]}), to(${heatCorlors[3]}));border-radius:1px'> </div>
        <p style='left: 50px;'>${heatLayer.name || '网格图'}</p>
      </div>
    `;
    return html;
  },
  autoCalgraph(layerId, color) {
    const itemColor = color;
    const emphsisColor = 'red';
    const html = `
     <div class="${layerId}" style='text-align:center;padding:10px;line-height :50px'>
        <div style='display:inline-block;width:10px;height:10px;background:${itemColor};border-radius:10px' onmouseover="this.style.background='${emphsisColor}'" onmouseout="this.style.background='${itemColor}'"></div>
        <div style='display:inline-block;width:10px;height:10px;background:${itemColor};border-radius:10px;' onmouseover="this.style.background='${emphsisColor}'" onmouseout="this.style.background='${itemColor}'"></div>
        <div style='width:10px;height:10px;background:${itemColor};border-radius:10px' onmouseover="this.style.background='${emphsisColor}'" onmouseout="this.style.background='${itemColor}'"></div>
     </div>
    `;
    const layers = sgisLayerBase.overLayers;
    for (const key in layers) {
      if (layers[key].layerId === layerId) {
        layers[key].html = html;
      }
    }
  }
};
